<template>
  <div>
    <a-card title="重修选课">
      <a-alert
        message="当前可选的课程列表"
        type="info"
        show-icon
        style="margin-bottom: 16px"
      />
      <a-table
        :columns="columns"
        :dataSource="availableCourses"
        :pagination="{ pageSize: 10 }"
        :rowSelection="{ selectedRowKeys: selectedCourseKeys, onChange: onSelectChange }"
      >
        <template slot="time" slot-scope="text, record">
          {{ record.day }} {{ record.timeSlot }}
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="viewCourseDetail(record)">查看详情</a>
        </template>
      </a-table>
      
      <div style="margin-top: 16px">
        <a-button type="primary" @click="submitSelection" :disabled="selectedCourseKeys.length === 0">
          提交选课
        </a-button>
        <span style="margin-left: 8px">
          已选 {{ selectedCourseKeys.length }} 门课程
        </span>
      </div>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '课程代码',
    dataIndex: 'code',
    key: 'code'
  },
  {
    title: '课程名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '学分',
    dataIndex: 'credit',
    key: 'credit'
  },
  {
    title: '教师',
    dataIndex: 'teacher',
    key: 'teacher'
  },
  {
    title: '上课时间',
    key: 'time',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '容量',
    dataIndex: 'capacity',
    key: 'capacity'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const availableCourses = [
  {
    key: '1',
    code: 'MATH102',
    name: '高等数学(下)',
    credit: 4,
    teacher: '李娜',
    day: '周一',
    timeSlot: '1-2节',
    capacity: '50/100'
  },
  {
    key: '2',
    code: 'PHYS101',
    name: '大学物理(上)',
    credit: 3,
    teacher: '王教授',
    day: '周二',
    timeSlot: '3-4节',
    capacity: '40/80'
  },
  {
    key: '3',
    code: 'EE201',
    name: '模拟电子技术',
    credit: 3,
    teacher: '李红梅',
    day: '周三',
    timeSlot: '5-6节',
    capacity: '30/60'
  }
]

export default {
  data() {
    return {
      columns,
      availableCourses,
      selectedCourseKeys: []
    }
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedCourseKeys = selectedRowKeys
    },
    submitSelection() {
      this.$confirm({
        title: '确认提交选课吗?',
        content: `您已选择 ${this.selectedCourseKeys.length} 门课程`,
        onOk: () => {
          const selectedCourses = this.availableCourses.filter(
            course => this.selectedCourseKeys.includes(course.key)
          )
          console.log('选课结果:', selectedCourses)
          this.$message.success('选课提交成功')
          this.selectedCourseKeys = []
        }
      })
    },
    viewCourseDetail(record) {
      console.log('查看课程详情:', record)
    }
  }
}
</script>